<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../themes/icon.css">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>
    <title>User</title>
</head>

<body>
    <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'north'" style="height:50px;padding-top:10px">
            <a href="#" id="addBtn" style="margin:0 5px 0 30px" onclick="$('#dlg').dialog('open')" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加用户</a>
            <a href="#" id="removeBtn" style="margin-right:5px" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除用户</a>
            <input class="easyui-searchbox" data-options="prompt:'请输入需要查找的用户名',searcher:doSearch" style="width:20%;">
        </div>
        <!--<div data-options="region:'west',split:true" title="千峰学员管理" style="width:180px;">
            <ul id="tt"></ul>
        </div>-->
        <div data-options="region:'center',iconCls:'icon-ok'" title="Center" style="padding:5px">
            <table id="dg"></table>
        </div>
    </div>
    <div id="dlg" class="easyui-dialog mess_dialog" title="信息提示" data-options="iconCls:'icon-save',closed:true" style="width:250px;height:80px;padding:10px;">
        请选择用户分类，否则无法添加用户
    </div>
    <div id="dlg" class="easyui-dialog form_dialog" title="添加用户" data-options="iconCls:'icon-save',closed:true" style="width:400px;height:450px;padding:10px;">
        <form id="ff" method="post">
            <div style="margin-bottom:20px;margin-top:20px">
                <input class="easyui-textbox" name="username" style="width:100%" data-options="label:'Name:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="userId" style="width:100%" data-options="label:'ID:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <label>Man：　<input type="radio" style="margin-right:40px" name="sex" value="男" data-options="required:true"></label>
                <label>Woman：　<input type="radio" name="sex" value="女" data-options="required:true"></label>
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="phone" style="width:100%" data-options="label:'Telphone:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="email" style="width:100%" data-options="label:'Email:',required:true,validType:'email'">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="address" style="width:100%" data-options="label:'Address:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" type="date" name="date" style="width:100%" data-options="label:'Date:',required:true">
            </div>
        </form>
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
        </div>
    </div>
    <script>
        var cateId = null;

        //----------------------------------生成数据表格
        $('#dg').datagrid({
            fit: true,
            border: true,
            queryParams: {
                cateId: cateId
            },
            pagination: true,
            pageSize: 25,
            pageList: [25, 50, 75, 100],
            url: 'http://localhost:3000/users/list',
            columns: [
                [{
                    field: 'ck',
                    title: '多选',
                    checkbox: true
                }, {
                    field: 'username',
                    title: '姓名',
                    width: '10%',
                    align: 'center'
                }, {
                    field: 'userId',
                    title: 'ID',
                    width: '8%',
                    align: 'center'
                }, {
                    field: 'sex',
                    title: '性别',
                    width: '7%',
                    align: 'center'
                }, {
                    field: 'phone',
                    title: '联系电话',
                    width: '10%',
                    align: 'center'
                }, {
                    field: 'email',
                    title: '邮箱',
                    width: '12%',
                    align: 'left'
                }, {
                    field: 'address',
                    title: '地址',
                    width: '27%',
                    align: 'left'
                }, {
                    field: 'date',
                    title: '注册日期',
                    width: '10%',
                    align: 'center'
                }, {
                    field: 'operate',
                    title: '操作',
                    width: '10%',
                    align: 'center',
                    formatter: function(value, row, index) {
                        return "<a onclick=deleteData('" + row._id + "')>删除</a>　<a onclick=editData('" + row._id + "')>修改</a>"
                    }
                }]
            ]
        });
        //--------------删除表格数据
        function deleteData(id) {
            //--------------数据删除弹出信息框
            $.messager.confirm('确认删除', '你确认删除数据吗？', function(r) {
                if (r) {
                    $.ajax({
                        type: "delete",
                        url: "http://localhost:3000/users/data/" + id,
                        async: true
                    }).done(function(res) {
                        $("#dg").datagrid("reload");
                    });

                    //数据删除弹出信息框
                    $('.mess_dialog').dialog('open');
                    $('.mess_dialog').text('用户删除成功');
                }
            })
        }
        //--------------------删除多条表格数据
        $("#removeBtn").click(function() {
        	$.messager.confirm('确认删除', '你确认删除数据吗？', function(r) {
                if (r) {
            		var rows = $("#dg").datagrid('getSelections');
            		if (rows.length > 0) {
		                var ids = [];
		                rows.forEach(function(value, index) {
		                    ids.push(value._id)
		                })
		                $.ajax({
		                    type: "post",
		                    url: "http://localhost:3000/users/data/removes",
		                    data: {
		                        ids: ids.toString()
		                    },
		                    async: true
		                }).done(function(res) {
		                    $("#dg").datagrid("reload")
		                })
		                
		                //数据删除弹出信息框
	                    $('.mess_dialog').dialog('open');
	                    $('.mess_dialog').text('用户删除成功');
            		}
            	}
       		})
        })

        //-----------------修改表格数据
        var editId=null;
        function editData(id) {
            $.ajax({
                type: "get",
                url: "http://localhost:3000/users/data/" + id,
                async: true
            }).done(function(res) {
                $("#ff").form('load', res);
                $('.form_dialog').dialog('open');
                editId=id;
            })

        }


        //----------------------------------左边结构生成分类
        /*$('#tt').tree({
            url:'http://localhost:3000/cate/list/1',
            method:'get',
            onClick:function(node){
            	cateId=node._id;
            	$("#dg").datagrid({
            		queryParams:{
            			cateId:cateId
            		}
            	}).datagrid("reload")
            }
        });*/

        //--------------------------------点击添加用户按钮判断是否点击左边分类
        $('#addBtn').click(function() {
			$('#ff').form('clear');
            /*if(cateId===null){
            	$('.mess_dialog').show();
            	$('.form_dialog').hide();
            }else{
            	$('.mess_dialog').hide();
            	$('.form_dialog').show();
            }*/
            $('.mess_dialog').dialog('close');
            $('.form_dialog').dialog('open');
        });

        //---------------------------------添加用户时表单提交验证
        function submitForm() {
        	var postData = $('#ff').serializeJSON();
        	postData.cateId = cateId;
        	if(editId!=null){//------说明是修改
        		$.ajax({
					type:"put",
					url:"http://localhost:3000/users/data/" +editId,
					data: postData,
					async:true
				}).done(function(res){
					$('.form_dialog').dialog('close');
	                $('.mess_dialog').dialog('open');
	                $('.mess_dialog').text('用户修改成功');
					$('#dg').datagrid('reload');
					editId=null;
				});
        	}else{//---------------说明是添加
        		$.ajax({
	                type: "post",
	                url: "http://localhost:3000/users/data",
	                data: postData,
	                async: true
	            }).done(function(res) {
	                //这里添加提示关闭表单打开信息提示
	                $('.form_dialog').dialog('close');
	                $('.mess_dialog').dialog('open');
	                $('.mess_dialog').text('用户添加成功');
	
	                //添加成功刷新表单
	                $("#dg").datagrid("reload");
	            });
        	}
        };
        //---------------------------------不添加用户是点击clear关闭表单
        function clearForm() {
            $('#ff').form('clear');
        };

        function doSearch(value) {
            $("#dg").datagrid({
                queryParams: {
                    cateId: cateId,
                    name: value
                }
            }).datagrid("reload");
        }
    </script>
</body>

</html>